<template>
	<view>
		<view style="margin-top: 20rpx;flex-direction: row;display: flex;">
			<button @click="setChiChu" type="primary"  plain size="mini" style="width: 320rpx;">一键彳亍编码</button>
			<button @click="setSpeffz" type="primary"  plain size="mini" style="width: 320rpx;">一键Speffz编码</button>
		</view>
		<view style="display: flex;flex-direction: row; margin-top: 10rpx;">
			<view  style="margin-top: 5rpx; visibility: hidden;">
				<view style="display: flex;flex-direction: row;">
					<view class="colorView"></view>
					<view class="colorView"></view>
					<view class="colorView"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView"></view>
					<view class="colorView"></view>
					<view class="colorView"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView"></view>
					<view class="colorView"></view>
					<view class="colorView"></view>
				</view>
			</view>
		
			<view style="margin-top: 5rpx; margin-left: 5rpx;">
				<view style="display: flex;flex-direction: row;">
					
					<input id="c3_0" v-model="c3_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[0] }"/>
					<input id="e0_0" v-model="e0_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[1] }"/>
					<input id="c0_0" v-model="c0_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[2] }"/>
				</view>
				<view style="display: flex;flex-direction: row;">
					<input id="e3_0" v-model="e3_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[3] }"/>
					<view class="colorView" :style="{ backgroundColor: colors[4] }"></view>
					<input id="e1_0" v-model="e1_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[5] }"/>
				</view>
				<view style="display: flex;flex-direction: row;">
					<input id="c2_0" v-model="c2_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[6] }"/>
					<input id="e2_0" v-model="e2_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[7] }"/>
					<input id="c1_0" v-model="c1_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[8] }"/>
				</view>
			</view>
		
		</view>
		
		<view style="display: flex;flex-direction: row;">
			<view  style="margin-top: 5rpx;">
				<view style="display: flex;flex-direction: row;">
					<input id="c3_1" v-model="c3_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[36] }"/>
					<input id="e3_1" v-model="e3_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[37] }"/>
					<input id="c2_2" v-model="c2_2"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[38] }"/>
				</view>
				<view style="display: flex;flex-direction: row;">
					<input id="e11_1" v-model="e11_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[39] }"/>
					<view class="colorView" :style="{ backgroundColor: colors[40] }"></view>
					<input id="e9_1" v-model="e9_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[41] }"/>
				</view>
				<view style="display: flex;flex-direction: row;">
					<input id="c7_2" v-model="c7_2"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[42] }"/>
					<input id="e16_1" v-model="e16_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[43] }"/>
					<input id="c6_1" v-model="c6_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[44] }"/>
				</view>
			</view>
		
			<view style="margin-top: 5rpx; margin-left: 5rpx;">
				<view style="display: flex;flex-direction: row;">
					<input id="c2_1" v-model="c2_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[18] }"/>
					<input id="e2_1" v-model="e2_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[19] }"/>
					<input id="c1_2" v-model="c1_2"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[20] }"/>
				</view>
				<view style="display: flex;flex-direction: row;">
					<input id="e9_0" v-model="e9_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[21] }"/>
					<view class="colorView" :style="{ backgroundColor: colors[22] }"></view>
					<input id="e7_0" v-model="e7_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[23] }"/>
				</view>
				<view style="display: flex;flex-direction: row;">
					<input id="c6_2" v-model="c6_2"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[24] }"/>
					<input id="e15_1" v-model="e15_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[25] }"/>
					<input id="c5_1" v-model="c5_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[26] }"/>
				</view>
			</view>
		
			<view style="margin-top: 5rpx; margin-left: 5rpx;">
				<view style="display: flex;flex-direction: row;">
					<input id="c1_1" v-model="c1_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[9] }"/>
					<input id="e1_1" v-model="e1_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[10] }"/>
					<input id="c0_2" v-model="c0_2"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[11] }"/>
				</view>
				<view style="display: flex;flex-direction: row;">
					<input id="e7_1" v-model="e7_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[12] }"/>
					<view class="colorView" :style="{ backgroundColor: colors[13] }"></view>
					<input id="e5_1" v-model="e5_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[14] }"/>
				</view>
				<view style="display: flex;flex-direction: row;">
					<input id="c5_2" v-model="c5_2"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[15] }"/>
					<input id="e14_1" v-model="e14_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[16] }"/>
					<input id="c4_1" v-model="c4_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[17] }"/>
				</view>
			</view>
			
			
			<view style="margin-top: 5rpx; margin-left: 5rpx;">
				<view style="display: flex;flex-direction: row;">
					<input id="c0_1" v-model="c0_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[45] }"/>
					<input id="e0_1" v-model="e0_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[46] }"/>
					<input id="c3_2" v-model="c3_2"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[47] }"/>
				</view>
				<view style="display: flex;flex-direction: row;">
					<input id="e5_0" v-model="e5_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[48] }"/>
					<view class="colorView" :style="{ backgroundColor: colors[49] }"></view>
					<input id="e11_0" v-model="e11_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[50] }"/>
				</view>
				<view style="display: flex;flex-direction: row;">
					<input id="c4_2" v-model="c4_2"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[51] }"/>
					<input id="e13_1" v-model="e13_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[52] }"/>
					<input id="c7_1" v-model="c7_1"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[53] }"/>
				</view>
			</view>
		
		</view>
		
		<view style="display: flex;flex-direction: row;">
			<view  style="margin-top: 5rpx; visibility: hidden;">
				<view style="display: flex;flex-direction: row;">
					<view class="colorView"></view>
					<view class="colorView"></view>
					<view class="colorView"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView"></view>
					<view class="colorView"></view>
					<view class="colorView"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView"></view>
					<view class="colorView"></view>
					<view class="colorView"></view>
				</view>
			</view>
		
			<view style="margin-top: 5rpx; margin-left: 5rpx;">
				<view style="display: flex;flex-direction: row;">
					<input id="c6_0" v-model="c6_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[27] }"/>
					<input id="e15_0" v-model="e15_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[28] }"/>
					<input id="c5_0" v-model="c5_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[29] }"/>
				</view>
				<view style="display: flex;flex-direction: row;">
					<input id="e16_0" v-model="e16_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[30] }"/>
					<view class="colorView" :style="{ backgroundColor: colors[31] }"></view>
					<input id="e14_0" v-model="e14_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[32] }"/>
				</view>
				<view style="display: flex;flex-direction: row;">
					<input id="c7_0" v-model="c7_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[33] }"/>
					<input id="e13_0" v-model="e13_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[34] }"/>
					<input id="c4_0" v-model="c4_0"  @input="replaceInput"  maxlength="1" class="colorView" :style="{ backgroundColor: colors[35] }"/>
				</view>
			</view>
		
			
		</view>
		<view style="margin-top: 20rpx;">
			<button @click="save">修改完一定要点我保存</button>
		</view>
	</view>
</template>

<script>
	import constant from '../../utils/constant';
	import storage from '../../utils/storage';
	export default {
		data() {
			return {
				colors:[constant.getYellow(),constant.getYellow(),constant.getYellow(),constant.getYellow(),constant.getYellow(),constant.getYellow(),constant.getYellow(),constant.getYellow(),constant.getYellow(),
							constant.getGreen(),constant.getGreen(),constant.getGreen(),constant.getGreen(),constant.getGreen(),constant.getGreen(),constant.getGreen(),constant.getGreen(),constant.getGreen(),
							constant.getRed(),constant.getRed(),constant.getRed(),constant.getRed(),constant.getRed(),constant.getRed(),constant.getRed(),constant.getRed(),constant.getRed(),
							constant.getWhite(),constant.getWhite(),constant.getWhite(),constant.getWhite(),constant.getWhite(),constant.getWhite(),constant.getWhite(),constant.getWhite(),constant.getWhite(),
							constant.getBlue(),constant.getBlue(),constant.getBlue(),constant.getBlue(),constant.getBlue(),constant.getBlue(),constant.getBlue(),constant.getBlue(),constant.getBlue(),
							constant.getOrange(),constant.getOrange(),constant.getOrange(),constant.getOrange(),constant.getOrange(),constant.getOrange(),constant.getOrange(),constant.getOrange(),constant.getOrange(),
							],
				cubeState:"UUUUUUUUURRRRRRRRRFFFFFFFFFDDDDDDDDDLLLLLLLLLBBBBBBBBB",
				cornerS :[],
				edgeS :[],
				cornerS_ChiChu :["GHI","JKL","ABC","DEF","RST","XYZ","WMN","OPQ"],
				edgeS_ChiChu :["EF","GH","AB","CD","UU",
							"YZ","RR","QR","FF","ST","LL","WX","BB",
							"MN","OP","IJ","KL","DD"],
				cornerS_Speffz :["BQN","CMJ","DIF","AER","WOT","VKP","UGL","XSH"],
				edgeS_Speffz :["AQ","BM","CI","DE","UU",
							"TN","RR","JP","FF","LF","LL","RH","BB",
							"WS","VO","UK","XG","DD"],
				c0_0:"",c0_1:"",c0_2:"",
				c1_0:"",c1_1:"",c1_2:"",
				c2_0:"",c2_1:"",c2_2:"",
				c3_0:"",c3_1:"",c3_2:"",
				c4_0:"",c4_1:"",c4_2:"",
				c5_0:"",c5_1:"",c5_2:"",
				c6_0:"",c6_1:"",c6_2:"",
				c7_0:"",c7_1:"",c7_2:"",
				e0_0:"",e0_1:"",
				e1_0:"",e1_1:"",
				e2_0:"",e2_1:"",
				e3_0:"",e3_1:"",
				e5_0:"",e5_1:"",
				e7_0:"",e7_1:"",
				e9_0:"",e9_1:"",
				e11_0:"",e11_1:"",
				e13_0:"",e13_1:"",
				e14_0:"",e14_1:"",
				e15_0:"",e15_1:"",
				e16_0:"",e16_1:"",
				coordinateIndex:0,
				coordinateRange: []
				
			};
		},
		onLoad() {
			this.coordinateRange = constant.getCoordinateRange();
			this.cornerS = constant.getCornerS();
			this.c0_0 = this.cornerS[0][0];
			this.c0_1 = this.cornerS[0][1];
			this.c0_2 = this.cornerS[0][2];
			this.c1_0 = this.cornerS[1][0];
			this.c1_1 = this.cornerS[1][1];
			this.c1_2 = this.cornerS[1][2];
			this.c2_0 = this.cornerS[2][0];
			this.c2_1 = this.cornerS[2][1];
			this.c2_2 = this.cornerS[2][2];
			this.c3_0 = this.cornerS[3][0];
			this.c3_1 = this.cornerS[3][1];
			this.c3_2 = this.cornerS[3][2];
			
			this.c4_0 = this.cornerS[4][0];
			this.c4_1 = this.cornerS[4][1];
			this.c4_2 = this.cornerS[4][2];
			this.c5_0 = this.cornerS[5][0];
			this.c5_1 = this.cornerS[5][1];
			this.c5_2 = this.cornerS[5][2];
			this.c6_0 = this.cornerS[6][0];
			this.c6_1 = this.cornerS[6][1];
			this.c6_2 = this.cornerS[6][2];
			this.c7_0 = this.cornerS[7][0];
			this.c7_1 = this.cornerS[7][1];
			this.c7_2 = this.cornerS[7][2];
			
			this.edgeS = constant.getEdgeS();
			this.e0_0 = this.edgeS[0][0];
			this.e0_1 = this.edgeS[0][1];
			this.e1_0 = this.edgeS[1][0];
			this.e1_1 = this.edgeS[1][1];
			this.e2_0 = this.edgeS[2][0];
			this.e2_1 = this.edgeS[2][1];
			this.e3_0 = this.edgeS[3][0];
			this.e3_1 = this.edgeS[3][1];
			this.e5_0 = this.edgeS[5][0];
			this.e5_1 = this.edgeS[5][1];
			this.e7_0 = this.edgeS[7][0];
			this.e7_1 = this.edgeS[7][1];
			this.e9_0 = this.edgeS[9][0];
			this.e9_1 = this.edgeS[9][1];
			this.e11_0 = this.edgeS[11][0];
			this.e11_1 = this.edgeS[11][1];
			this.e13_0 = this.edgeS[13][0];
			this.e13_1 = this.edgeS[13][1];
			this.e14_0 = this.edgeS[14][0];
			this.e14_1 = this.edgeS[14][1];
			this.e15_0 = this.edgeS[15][0];
			this.e15_1 = this.edgeS[15][1];
			this.e16_0 = this.edgeS[16][0];
			this.e16_1 = this.edgeS[16][1];
			this.coordinateIndex = constant.getCoordinate();
			this.colors = this.getColors();
			
			
			
		},
		methods:{
			replaceInput: function(event) {
			            var value = event.target.value;
						value = value.toUpperCase();
						var id = event.target.id;
						this.setCode(id,value);
			        },
			setCode(id,value){
				if(id=="c0_0"){
					this.c0_0 = value;
				}else if(id=="c0_1"){
					this.c0_1=value;
				}else if(id=="c0_2"){
					this.c0_2=value;
				}else if(id=="c1_0"){
					this.c1_0 = value;
				}else if(id=="c1_1"){
					this.c1_1=value;
				}else if(id=="c1_2"){
					this.c1_2=value;
				}else if(id=="c2_0"){
					this.c2_0 = value;
				}else if(id=="c2_1"){
					this.c2_1=value;
				}else if(id=="c2_2"){
					this.c2_2=value;
				}else if(id=="c3_0"){
					this.c3_0 = value;
				}else if(id=="c3_1"){
					this.c3_1=value;
				}else if(id=="c3_2"){
					this.c3_2=value;
				}else if(id=="c4_0"){
					this.c4_0 = value;
				}else if(id=="c4_1"){
					this.c4_1=value;
				}else if(id=="c4_2"){
					this.c4_2=value;
				}else if(id=="c5_0"){
					this.c5_0 = value;
				}else if(id=="c5_1"){
					this.c5_1=value;
				}else if(id=="c5_2"){
					this.c5_2=value;
				}else if(id=="c6_0"){
					this.c6_0 = value;
				}else if(id=="c6_1"){
					this.c6_1=value;
				}else if(id=="c6_2"){
					this.c6_2=value;
				}else if(id=="c7_0"){
					this.c7_0 = value;
				}else if(id=="c7_1"){
					this.c7_1=value;
				}else if(id=="c7_2"){
					this.c7_2=value;
				}else if(id=="e0_0"){
					this.e0_0=value;
				}else if(id=="e0_1"){
					this.e0_1=value;
				}else if(id=="e1_0"){
					this.e1_0=value;
				}else if(id=="e1_1"){
					this.e1_1=value;
				}else if(id=="e2_0"){
					this.e2_0=value;
				}else if(id=="e2_1"){
					this.e2_1=value;
				}else if(id=="e3_0"){
					this.e3_0=value;
				}else if(id=="e3_1"){
					this.e3_1=value;
				}else if(id=="e5_0"){
					this.e5_0=value;
				}else if(id=="e5_1"){
					this.e5_1=value;
				}else if(id=="e7_0"){
					this.e7_0=value;
				}else if(id=="e7_1"){
					this.e7_1=value;
				}else if(id=="e9_0"){
					this.e9_0=value;
				}else if(id=="e9_1"){
					this.e9_1=value;
				}else if(id=="e11_0"){
					this.e11_0=value;
				}else if(id=="e11_1"){
					this.e11_1=value;
				}else if(id=="e13_0"){
					this.e13_0=value;
				}else if(id=="e13_1"){
					this.e13_1=value;
				}else if(id=="e14_0"){
					this.e14_0=value;
				}else if(id=="e14_1"){
					this.e14_1=value;
				}else if(id=="e15_0"){
					this.e15_0=value;
				}else if(id=="e15_1"){
					this.e15_1=value;
				}else if(id=="e16_0"){
					this.e16_0=value;
				}else if(id=="e16_1"){
					this.e16_1=value;
				}
			},
			save(){
				//校验重复元素
				var ary = [ this.c0_0,this.c0_1,this.c0_2,
							this.c1_0,this.c1_1,this.c1_2,
							this.c2_0,this.c2_1,this.c2_2,
							this.c3_0,this.c3_1,this.c3_2,
							this.c4_0,this.c4_1,this.c4_2,
							this.c5_0,this.c5_1,this.c5_2,
							this.c6_0,this.c6_1,this.c6_2,
							this.c7_0,this.c7_1,this.c7_2
				];
				var isRepeat = false;
				var nary=ary.sort();
				for(var i=0;i<ary.length;i++){
					if (nary[i]==nary[i+1]){
						uni.showToast({
							title:"角有重复编码"+nary[i],
							icon:'error'
						})
						isRepeat = true;
						break;
					}
				}
				if(isRepeat){
					return;
				}
				
				var edgeAry = [this.e0_0,this.e0_1,
								this.e1_0,this.e1_1,
								this.e2_0,this.e2_1,
								this.e3_0,this.e3_1,
								this.e5_0,this.e5_1,
								this.e7_0,this.e7_1,
								this.e9_0,this.e9_1,
								this.e11_0,this.e11_1,
								this.e13_0,this.e13_1,
								this.e14_0,this.e14_1,
								this.e15_0,this.e15_1,
								this.e16_0,this.e16_1
				];
				var isRepeat2 = false;
				var edegAry2= edgeAry.sort();
				for(var i=0;i<edgeAry.length;i++){
					if (edegAry2[i]==edegAry2[i+1]){
						uni.showToast({
							title:"棱有重复编码"+edegAry2[i],
							icon:'error'
						})
						isRepeat2 = true;
						break;
					}
				}
				if(isRepeat2){
					return;
				}
				
				
				this.cornerS[0]=this.c0_0+this.c0_1+this.c0_2;
				this.cornerS[1]=this.c1_0+this.c1_1+this.c1_2;
				this.cornerS[2]=this.c2_0+this.c2_1+this.c2_2;
				this.cornerS[3]=this.c3_0+this.c3_1+this.c3_2;
				this.cornerS[4]=this.c4_0+this.c4_1+this.c4_2;
				this.cornerS[5]=this.c5_0+this.c5_1+this.c5_2;
				this.cornerS[6]=this.c6_0+this.c6_1+this.c6_2;
				this.cornerS[7]=this.c7_0+this.c7_1+this.c7_2;
				storage.setStorageSync('cornerS',this.cornerS);
				
				this.edgeS[0]=this.e0_0+this.e0_1;
				this.edgeS[1]=this.e1_0+this.e1_1;
				this.edgeS[2]=this.e2_0+this.e2_1;
				this.edgeS[3]=this.e3_0+this.e3_1;
				this.edgeS[5]=this.e5_0+this.e5_1;
				this.edgeS[7]=this.e7_0+this.e7_1;
				this.edgeS[9]=this.e9_0+this.e9_1;
				this.edgeS[11]=this.e11_0+this.e11_1;
				this.edgeS[13]=this.e13_0+this.e13_1;
				this.edgeS[14]=this.e14_0+this.e14_1;
				this.edgeS[15]=this.e15_0+this.e15_1;
				this.edgeS[16]=this.e16_0+this.e16_1;
				storage.setStorageSync('edgeS',this.edgeS);
				uni.$emit('update');
				uni.showToast({
					title:'设置成功',
					duration:1000,
					success() {
						setTimeout(() => {
							uni.navigateBack();		
						}, 1000);
					}
				})
			},
			setChiChu(){
				this.cornerS=Array.from(this.cornerS_ChiChu);
				this.edgeS = Array.from(this.edgeS_ChiChu);
				storage.setStorageSync('cornerS',this.cornerS);
				storage.setStorageSync('edgeS',this.edgeS);
				uni.$emit('update');
				uni.showToast({
					title:'设置成功',
					duration:1000,
					success() {
						setTimeout(() => {
							uni.navigateBack();		
						}, 1000);
					}
				})
			},
			setSpeffz(){
				this.cornerS=Array.from(this.cornerS_Speffz);
				this.edgeS = Array.from(this.edgeS_Speffz);
				storage.setStorageSync('cornerS',this.cornerS);
				storage.setStorageSync('edgeS',this.edgeS);
				uni.$emit('update');
				uni.showToast({
					title:'设置成功',
					duration:1000,
					success() {
						setTimeout(() => {
							uni.navigateBack();		
						}, 1000);
					}
				})
			},
			getColors(){
					var result = [];
					for(var c=0;c<this.cubeState.length;c++){
						result.push(this.getColor(this.cubeState[c]));
					}
					return result;
				},
				getColor(option){
					if(option=="U")return this.getColorWithCoordinate()[this.coordinateIndex][0];
					if(option=="B")return this.getColorWithCoordinate()[this.coordinateIndex][1];
					if(option=="R")return this.getColorWithCoordinate()[this.coordinateIndex][2];
					if(option=="F")return this.getColorWithCoordinate()[this.coordinateIndex][3];
					if(option=="D")return this.getColorWithCoordinate()[this.coordinateIndex][4];
					if(option=="L")return this.getColorWithCoordinate()[this.coordinateIndex][5];
				},
				handleCodeArrays(res){
					this.coordinate = res[0];
					this.cornerCodeArray=res[1];
					this.cornerCodeFlipArray=res[2];
					this.edgeCodeArray=res[3];
					this.edgeCodeFlipArray=res[4];
				},
				getColorWithCoordinate(){
					var colors = [
						//坐标颜色按照   U       B      R     F      D        L 的顺序存储
						[constant.getYellow(),constant.getOrange(),constant.getGreen(),constant.getRed(),constant.getWhite(),constant.getBlue()],//黄顶红前
						[constant.getYellow(),constant.getGreen(),constant.getRed(),constant.getBlue(),constant.getWhite(),constant.getOrange()],//黄顶蓝前
						[constant.getYellow(),constant.getRed(),constant.getBlue(),constant.getOrange(),constant.getWhite(),constant.getGreen()],//黄顶橙前
						[constant.getYellow(),constant.getBlue(),constant.getOrange(),constant.getGreen(),constant.getWhite(),constant.getRed()],//黄顶绿前
						
						[constant.getWhite(),constant.getBlue(),constant.getRed(),constant.getGreen(),constant.getYellow(),constant.getOrange()],//白顶绿前
						[constant.getWhite(),constant.getRed(),constant.getGreen(),constant.getOrange(),constant.getYellow(),constant.getBlue()],//白顶橙前
						[constant.getWhite(),constant.getGreen(),constant.getOrange(),constant.getBlue(),constant.getYellow(),constant.getRed()],//白顶蓝前
						[constant.getWhite(),constant.getOrange(),constant.getBlue(),constant.getRed(),constant.getYellow(),constant.getGreen()],//白顶红前
						
						[constant.getGreen(),constant.getOrange(),constant.getWhite(),constant.getRed(),constant.getBlue(),constant.getYellow()],//绿顶红前
						[constant.getGreen(),constant.getWhite(),constant.getRed(),constant.getYellow(),constant.getBlue(),constant.getOrange()],//绿顶黄前
						[constant.getGreen(),constant.getRed(),constant.getYellow(),constant.getOrange(),constant.getBlue(),constant.getWhite()],//绿顶橙前
						[constant.getGreen(),constant.getYellow(),constant.getOrange(),constant.getWhite(),constant.getBlue(),constant.getRed()],//绿顶白前
						
						[constant.getBlue(),constant.getOrange(),constant.getYellow(),constant.getRed(),constant.getGreen(),constant.getWhite()],//蓝顶红前
						[constant.getBlue(),constant.getYellow(),constant.getRed(),constant.getWhite(),constant.getGreen(),constant.getOrange()],//蓝顶白前
						[constant.getBlue(),constant.getRed(),constant.getWhite(),constant.getOrange(),constant.getGreen(),constant.getYellow()],//蓝顶橙前
						[constant.getBlue(),constant.getWhite(),constant.getOrange(),constant.getYellow(),constant.getGreen(),constant.getRed()],//蓝顶黄前
						
						[constant.getRed(),constant.getBlue(),constant.getYellow(),constant.getGreen(),constant.getOrange(),constant.getWhite()],//红顶绿前
						[constant.getRed(),constant.getYellow(),constant.getGreen(),constant.getWhite(),constant.getOrange(),constant.getBlue()],//红顶白前
						[constant.getRed(),constant.getGreen(),constant.getWhite(),constant.getBlue(),constant.getOrange(),constant.getYellow()],//红顶蓝前
						[constant.getRed(),constant.getWhite(),constant.getBlue(),constant.getYellow(),constant.getOrange(),constant.getGreen()],//红顶黄前
						
						[constant.getOrange(),constant.getWhite(),constant.getGreen(),constant.getYellow(),constant.getRed(),constant.getBlue()],//橙顶黄前
						[constant.getOrange(),constant.getGreen(),constant.getYellow(),constant.getBlue(),constant.getRed(),constant.getWhite()],//橙顶蓝前
						[constant.getOrange(),constant.getYellow(),constant.getBlue(),constant.getWhite(),constant.getRed(),constant.getGreen()],//橙顶白前
						[constant.getOrange(),constant.getBlue(),constant.getWhite(),constant.getGreen(),constant.getRed(),constant.getYellow()]//橙顶绿前
						
						];
					
					return colors;
				}
		}
	}
</script>

<style lang="scss">
.colorView{
	display: flex;
	flex-direction: column;
	width: 55rpx;
	height: 55rpx;  
	margin: 1rpx;
	border: solid;
	font-size: 35rpx;
	border-width: 2rpx;
	align-items: center;
	justify-content:center;
	text-align: center;
}
</style>
